<?xml version="1.0" encoding="iso-8859-1"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Flexible box with custom corners and borders | Lab | 456 Berea Street</title>
        <style type="text/css" media="screen,print">
            html, body {
                margin: 0;
                padding: 0;
                color: #000;
                background: #fff;
            }
            
            body {
                padding: 10px;
                font: 76% / 135% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
            }
            
            /* CSS for the box starts here */
            .box {
                padding: 0 12px 0 0;
                background: #fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 100% 0 repeat-y;
            }
            
            .bi {
                padding: 0 0 0 12px;
                background: #fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 0 0 repeat-y;
            }
            
            .bt {
                height: 17px;
                margin: 0 -12px;
                background: url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 0 no-repeat;
            }
            
            .bt div {
                width: 18px;
                height: 17px;
                background: url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 0 no-repeat;
            }
            
            .bb {
                height: 17px;
                margin: 0 -12px;
                background: url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 100% no-repeat;
            }
            
            .bb div {
                width: 18px;
                height: 17px;
                background: url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 100% no-repeat;
            }
            
            .box h1 {
                margin: 0;
                padding: 0.3em 10px;
                background: #efece6;
                font: bold 1.2em / 1 Arial, Helvetica, sans-serif;
            }
            
            .box p, .box ul {
                margin: 0;
                padding: 4px 10px;
                background: #fff;
            }
            
            .box li {
                margin: 0 0 0 2em;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="bi">
                <div class="bt">
                    <div>
                    </div>
                </div>
                <h1>Flexible box with custom corners and borders</h1>
                <p>
                    This is a demo of a flexible box with custom corners and custom borders. 
                    The box will expand to contain any amount of content vertically, will handle  
                    any text size, and can become very wide before the horizontal borders start 
                    breaking up. How wide depends on the width of one of the background images.
                </p>
                <p>
                    Two images are used. <a href="box.gif">
                        <code>
                            box.gif
                        </code>
                    </a>
                    is a 
                    complete box. For the sake of this demo I’ve made it 1600 pixels wide. It 
                    is used for the corners and the horizontal borders. The other image,<a href="borders.gif">
                        <code>
                            borders.gif
                        </code>
                    </a>, contains the vertical 
                    borders. Why use a single, large image for the corners instead of several 
                    smaller ones? There are several reasons:
                </p>
                <ul>
                    <li>
                        Splitting the image into a bunch (six in this case – one for each 
                        corner plus the top and bottom borders) of smaller images may actually  
                        increase the total file size, depending on the look of the corners and 
                        borders.
                    </li>
                    <li>
                        To minimize the number of HTTP requests sent to the server.
                    </li>
                    <li>
                        Convenience. When changing the look of the borders and corners, 
                        replacing two files is faster than replacing eight files.
                    </li>
                </ul>
                <p>
                    Some extra markup is needed to put the corners and borders in place. 
                    A bit annoying, yes, but this extra, non-semantic XHTML is quite minimal,  
                    and won’t get in the way if CSS is off, so I think I can live with it. It 
                    is possible to get rid of some more markup by using the 
                    <code>
                        :before
                    </code>
                    and 
                    <code>
                        :after
                    </code>
                    pseudo-elements, but since Internet Explorer doesn’t 
                    support them I’ll leave the extra markup in there.
                </p>
                <p>
                    The main content area of this box can be filled with any elements you 
                    like, as long as their background colour is set to white (or whatever colour  
                    the inside of your box has), and their margins are zeroed. If the content 
                    is transparent the left border will be doubled because the image used to  
                    create it also contains the right border. You can avoid the need for that 
                    by splitting the image in two, or adding an extra 
                    <code>
                        div
                    </code>
                    to put 
                    all your content in.
                </p>
                <div class="bb">
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
